<template>
    <div class="app">
        <div class="topTab">
            <label>
                <el-form>
                    <span>文章标题:</span>
                    <el-input v-model="articleTitle" placeholder="请输入内容" :style="{width:'200px',margin:'0 15px'}"/>
                    <el-button type="primary" @click="queryArticle()">搜索</el-button>
                    <el-button type="primary" @click="addArticleData()">新增文章</el-button>
                </el-form>
            </label>
            <div class="addArticle">
                <el-dialog :title="title" :visible.sync="dialogVisible" width="50%" :style="{textAlign: 'center'}">
                    <!--                    <el-form :model="addArticle">-->
                    <!--                    文章的名称-->
                    <label style="margin: 10px">文章名称:
                        <el-input v-model="addArticle.name" placeholder="请输入文章标题:"
                                  :style="{width:'400px',margin: '10px'}"
                        ></el-input>
                    </label><br/>
                    <!--                    文章内容的简介-->
                    <label style="margin: 10px">
                        <span>文章简介: </span>
                        <el-input
                                type="text"
                                placeholder="请输入文章简介:"
                                v-model="addArticle.simplyintroduce"
                                :style="{width:'400px',margin: '10px'}"
                        >
                        </el-input>
                    </label><br/>
                    <!--                    文章的图片-->
                    <div :style="{textAlign:'left',marginLeft:'115px'}">
                        <el-upload action="http://localhost:8080/upload/image"
                                   name="file"
                                   list-type="picture-card" :auto-upload="true"
                                   :on-success="getClassPath"
                        >
                            <i slot="default" class="el-icon-plus"></i>
                            <div slot="file" slot-scope="{file}">
                                <img class="el-upload-list__item-thumbnail" :src="file.url" alt=""/>
                                <span class="el-upload-list__item-actions">
                                    <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                                      <i class="el-icon-zoom-in"></i>
                                    </span>
                                    <span v-if="!disabled" class="el-upload-list__item-delete"
                                          @click="handleDownload(file)">
                                      <i class="el-icon-download"></i>
                                    </span>
                                    <span v-if="!disabled" class="el-upload-list__item-delete"
                                          @click="handleRemove(file)">
                                      <i class="el-icon-delete"></i>
                                    </span>
                                  </span>
                            </div>
                        </el-upload>
                    </div>
                    <br/>
                    <!--                    文章的详情-->
                    <label style="margin: 10px">文章详情:
                        <el-input
                                type="text"
                                placeholder="请输入文章详情:"
                                v-model="addArticle.text"
                                :style="{width:'400px',margin: '10px'}"
                        >
                        </el-input>

                    </label><br/>
                    <!--                    </el-form>-->
                    <el-form :style="{textAlign:'right',padding:'15px'}">
                        <el-button @click="dialogVisible = false">取 消</el-button>
                        <el-button type="primary" @click="chooseAddOrUpdate()">确 定</el-button>
                    </el-form>
                </el-dialog>
            </div>
        </div>
        <div class="showData">
            <template>
                <el-table :data="articleData" border :style="{width:'100%',textAlign:'center'}"
                          :header-cell-style="{background: '#409eff', color: '#fff'}">
                    <el-table-column fixed prop="id" label="编号" width="150">
                    </el-table-column>
                    <el-table-column prop="name" label="文章名称" width="120">
                    </el-table-column>
                    <el-table-column prop="simplyintroduce" label="简介" width="120">
                    </el-table-column>
                    <!--                    <el-table-column label="照片" width="150">-->
                    <!--                        <img :src="'http://localhost:8080/upload/down?filename'+picture"/>-->
                    <!--                        &lt;!&ndash;                        <el-img :src="'http://localhost:8080/upload/down?fliename'+ picture">&ndash;&gt;-->
                    <!--                        &lt;!&ndash;                        </el-img>&ndash;&gt;-->
                    <!--                    </el-table-column>-->
                    <el-table-column label="图片">
                        <template slot-scope="scope">
                            <!--<el-image
                                    style="width: 100px; height: 100px"
                                    :src="'http://localhost:8080/upload/down?filename='+scope.row.picture"
                                    fit="fill"></el-image>-->
                            <img v-if="scope.row.picture.substr(0,5) === 'https' " :src="scope.row.picture" min-width="70" height="70"/>
                            <img v-else :src="'http://localhost:8080/upload/down?filename=' + scope.row.picture" min-width="70" height="70"/>
                        </template>
                    </el-table-column>
                    <el-table-column prop="text" label="详情" width="400">
                    </el-table-column>
                    <el-table-column label="操作" width="120">
                        <template slot-scope="scope">
                            <el-button @click="updateArticle(scope.row)" type="text" size="small">编辑</el-button>
                            <el-button type="text" size="small" @click="deleteArticle(scope.row.id)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </template>
        </div>
        <!--        分页组件-->
        <div :style="{marginTop:'20px'}">
            <template>
                <div>
                    <el-pagination
                            @current-change="handleCurrentChange"
                            :current-page.sync="currentPage"
                            :page-size="pageSize"
                            :total="pageCount"
                            @prev-click="getPrePage"
                            @next-click="getNextPage"
                    >
                    </el-pagination>
                </div>
            </template>
        </div>
    </div>
</template>

<script>
    export default {
        name: "HeartKnowledge",
        data() {
            return {
                //数据库的总条数
                pageCount: 0,
                //分页需要的当前页码
                // pageNum: '1',
                currentPage: 1,
                //分页每页显示的当前条数
                pageSize: 10,
                //绑定本页面数据
                articleData: [],
                //绑定搜索的输入框
                articleTitle: "",
                value1: "",
                //弹出框是否关闭
                dialogVisible: false,
                //输入框的整体宽度
                // inputWidth: "400px",
                //选框的标题
                title: "新增文章",
                //添加的数据绑定
                addArticle: {
                    // id: "",
                    name: "",
                    simplyintroduce: "",
                    image: "",
                    text: ""
                },
                dialogImageUrl: "",
                // dialogVisible: false,
                disabled: false,
                //说明输入框使添加还是编辑
                addOrUpdate: true
            }
        },
        created() {
            //页面开始加载的时候加载数据
            this.getHeartArticleData();
        },
        methods: {
            handleRemove(file) {
                console.log(file);
            },
            handlePictureCardPreview(file) {
                this.dialogImageUrl = file.url;
                this.dialogVisible = true;
            },
            handleDownload(file) {
                console.log(file);
            },
            handleClick(row) {
                console.log(row);
            },
            //获取本页面在数据库中的数据
            getHeartArticleData() {
                this.axios.get("/heartKnowledge/queryAllListByPage", {
                    params: {
                        pageNum: this.currentPage,
                        pageSize: this.pageSize,
                    }
                }).then((res) => {
                    if (res.data.code === 200) {
                        this.$message({
                            type: 'success',
                            message: "查询成功",
                            showClose: true,
                        })
                        //获取成功后将数据付给articleData
                        this.articleData = res.data.data.list;
                        this.pageCount=res.data.data.total;
                    } else {
                        this.$message({
                            type: 'error',
                            message: res.data.message,
                        })
                    }
                })
            },
            //获取照片的路径名称
            getClassPath(resp) {
                this.addArticle.image = resp.data;
            },
            // 执行添加的方法
            addArticleData() {
                this.title = "添加文章";
                //打开弹框
                this.dialogVisible = true;
                //addOrUpdate true表示添加，false表示修改 ,默认是添加
                this.addOrUpdate = true;
                //清空选矿
                this.clearData();
            },
            //根据addOrUpdate的不同调用不同的方法
            chooseAddOrUpdate() {
                if (this.addOrUpdate === true) {
                    //执行添加的方法
                    this.axios.post("/heartKnowledge/addHeartKnowledge", {
                        name: this.addArticle.name,
                        simplyintroduce: this.addArticle.simplyintroduce,
                        picture: this.addArticle.image,
                        text: this.addArticle.text,
                    }).then((res) => {
                        console.log(res)
                        if (res.data.code === 200) {
                            this.$message({
                                type: 'success',
                                message: "添加成功",
                                showClose: true,
                            })
                            //获取成功后将数据付给articleData
                            this.articleData = res.data.data;
                        } else {
                            this.$message({
                                type: 'error',
                                message: "添加失败",
                            })
                        }
                    }).catch((error) => {
                        console.log(error)
                    })
                } else {
                    this.axios.post("/heartKnowledge/updateHeartKnowledgeById", {
                        id: this.addArticle.id,
                        name: this.addArticle.name,
                        simplyintroduce: this.addArticle.simplyintroduce,
                        picture: this.addArticle.image,
                        text: this.addArticle.text,
                    }).then((res) => {
                        if (res.data.code === 200) {
                            this.$message({
                                type: 'success',
                                message: "修改成功",
                                showClose: true,
                            })
                            //获取成功后将数据付给articleData
                            this.articleData = res.data.data;
                        } else {
                            this.$message({
                                type: 'error',
                                message: "修改失败",
                            })
                        }
                    })
                }
                this.dialogVisible = false;
            },
            //删除数据的方法
            deleteArticle(id) {
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'success',
                }).then(() => {
                    this.axios.delete("/heartKnowledge/deleteHeartKnowledge", {
                        params: {
                            id: id
                        }
                    }).then((resp) => {
                        if (resp.data.code === 200) {
                            this.$message("删除成功!");
                            //删除完后重新获取本页面的数据
                            this.getHeartArticleData();
                        } else {
                            this.$message.error("删除失败!")
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            //修改的数据回显
            againtArticleData(row) {
                console.log(row)
                this.addArticle.name = row.name;
                this.addArticle.simplyintroduce = row.simplyintroduce;
                this.addArticle.image = row.image;
                this.addArticle.text = row.text;
            },
            //数据清空
            clearData() {
                this.addArticle.name = "";
                this.addArticle.simplyintroduce = "";
                this.addArticle.image = "";
                this.addArticle.text = ""
            },
            //修改数据的方法
            updateArticle(row) {
                this.title = "修改文章";
                //打开弹框
                this.dialogVisible = true;
                this.addArticle.id = row.id;
                //修改之前调用数据回显
                this.againtArticleData(row);
                //将标点设置为编辑
                this.addOrUpdate = false;
            },
            //搜索框调用的方法
            queryArticle() {
                this.axios.post("/heartKnowledge/queryHeartKnowledgeByName", {
                    name: this.articleTitle
                }).then((res) => {
                    // console.log(res.data.data);
                    this.articleData = res.data.data;
                })
            },
            //当点击上一页的时候
            handleCurrentChange(val) {
                this.currentPage=val;
                this.getHeartArticleData();
            },
            getPrePage(val) {
                this.currentPage=val;
                this.getHeartArticleData();
            },
            getNextPage(val) {
                this.currentPage=val;
                this.getHeartArticleData();
            },

        }
    }
</script>

<style scoped>
    .topTab {
        margin-bottom: 15px;
    }

    .topTab > label > span {
        padding: 10px 8px 20px;
    }

    .topTab > label {
        padding-right: 10px;
    }

    .addArticle > el-dialog > label {
        margin-bottom: 20px;
    }

    .el-dialog {
        width: 500px;
    }

    /*.inputCss {*/
    /*    width:100px;*/
    /*    margin:10px 10px;*/
    /*}*/
    .img-container > img {
        width: 100px;
        height: 100px;
    }
</style>